import { createContext, useState } from 'react'
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { SnackbarProvider } from 'notistack';
import { useLocation } from 'react-router-dom'
import Router from './routes/index'
import defaultTheme from './theme'
import './App.css'


export const ColorTheme = createContext('themeMode')

// localStorage.removeItem('theme')
let localThemeMode = localStorage.getItem('themeMode')

localThemeMode && (defaultTheme.palette.mode = localThemeMode)

function App() {
  const [theme,settheme] = useState(defaultTheme)

  const changeTheme = () => {
    let current = { ...theme }
    current.palette.mode = current.palette.mode === 'dark' ? 'light':'dark'
    settheme(current)
    localStorage.setItem('themeMode',current.palette.mode)
  }

  const location  = useLocation()

  return (
    <>
    <ColorTheme.Provider value={{changeTheme,theme}}>
      <ThemeProvider theme={createTheme(theme)}>
        <SnackbarProvider maxSnack={3} autoHideDuration={2000} anchorOrigin={{vertical: 'top',horizontal: 'center'}}>
          {/* 原文档直译: CssBaseline启动了一个优雅的、一致的、简单的基线 */}
              <CssBaseline />
              <Router></Router>

        </SnackbarProvider>

      </ThemeProvider>
    </ColorTheme.Provider>
    </>
  )
}

export default App
